<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚拟银行系统 - 消息中心</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <style>
    /* Notifications page specific styles */
    .notifications-container {
      max-width: 900px;
      margin: 0 auto;
    }
    
    .filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--spacing-md);
    }
    
    .notification-tabs {
      display: flex;
      border-bottom: 1px solid var(--divider-color);
      margin-bottom: var(--spacing-md);
    }
    
    .notification-tab {
      padding: var(--spacing-sm) var(--spacing-md);
      margin-right: var(--spacing-md);
      cursor: pointer;
      position: relative;
      font-weight: 500;
    }
    
    .notification-tab.active {
      color: var(--primary-color);
    }
    
    .notification-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--primary-color);
    }
    
    .notification-item {
      display: flex;
      align-items: flex-start;
      padding: var(--spacing-md);
      border: 1px solid var(--divider-color);
      border-radius: var(--border-radius-md);
      margin-bottom: var(--spacing-md);
      transition: all 0.3s;
      cursor: pointer;
      background-color: white;
    }
    
    .notification-item:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border-color: var(--primary-color);
    }
    
    .notification-item.unread {
      background-color: rgba(26, 58, 143, 0.05);
    }
    
    .notification-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: var(--spacing-md);
      flex-shrink: 0;
    }
    
    .notification-icon.system {
      background-color: rgba(26, 58, 143, 0.1);
      color: var(--primary-color);
    }
    
    .notification-icon.transaction {
      background-color: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }
    
    .notification-icon.activity {
      background-color: rgba(255, 153, 0, 0.1);
      color: var(--accent-color);
    }
    
    .notification-content {
      flex: 1;
      min-width: 0;
    }
    
    .notification-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--spacing-xs);
    }
    
    .notification-title {
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .notification-time {
      font-size: 12px;
      color: var(--light-text);
      margin-left: var(--spacing-md);
      white-space: nowrap;
    }
    
    .notification-preview {
      font-size: 14px;
      color: var(--light-text);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .notification-actions {
      display: flex;
      align-items: center;
      margin-left: var(--spacing-md);
    }
    
    .notification-action {
      color: var(--light-text);
      margin-left: var(--spacing-md);
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .notification-action:hover {
      color: var(--primary-color);
    }
    
    .notification-action.delete:hover {
      color: var(--error-color);
    }
    
    .notification-badge {
      display: inline-block;
      padding: 0 8px;
      height: 18px;
      border-radius: 9px;
      font-size: 12px;
      line-height: 18px;
      background-color: var(--light-bg);
      color: var(--light-text);
      margin-left: var(--spacing-sm);
    }
    
    .notification-badge.system {
      background-color: rgba(26, 58, 143, 0.1);
      color: var(--primary-color);
    }
    
    .notification-badge.transaction {
      background-color: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }
    
    .notification-badge.activity {
      background-color: rgba(255, 153, 0, 0.1);
      color: var(--accent-color);
    }
    
    .notification-status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--primary-color);
      margin-right: var(--spacing-sm);
      display: none;
    }
    
    .notification-item.unread .notification-status {
      display: block;
    }
    
    .notification-empty {
      text-align: center;
      padding: var(--spacing-xl) 0;
      color: var(--light-text);
    }
    
    .notification-empty i {
      font-size: 48px;
      margin-bottom: var(--spacing-md);
      color: var(--divider-color);
    }
    
    .notification-pagination {
      display: flex;
      justify-content: center;
      margin-top: var(--spacing-lg);
    }
    
    .notification-detail {
      padding: var(--spacing-lg);
    }
    
    .notification-detail-header {
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-md);
      border-bottom: 1px solid var(--divider-color);
    }
    
    .notification-detail-title {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: var(--spacing-xs);
    }
    
    .notification-detail-meta {
      display: flex;
      align-items: center;
      color: var(--light-text);
      font-size: 13px;
    }
    
    .notification-detail-type {
      margin-right: var(--spacing-md);
    }
    
    .notification-detail-time {
      margin-right: var(--spacing-md);
    }
    
    .notification-detail-content {
      line-height: 1.6;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .notification-actions {
        flex-direction: column;
        align-items: flex-end;
      }
      
      .notification-action {
        margin-left: 0;
        margin-bottom: var(--spacing-xs);
      }
    }
  </style>
</head>
<body>
  <div class="app-wrapper">
    <!-- Top Navigation Bar -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- Sidebar -->
      <div id="sidebar"></div>
      
      <!-- Main Content -->
      <div class="content">
        <div class="page-header">
          <div class="page-title">消息中心</div>
          <div class="breadcrumb">
            <a href="/index.html">首页</a>
            <i class="fas fa-angle-right"></i>
            <span>消息中心</span>
          </div>
        </div>
        
        <div class="notifications-container">
          <!-- Filter Bar -->
          <div class="filter-bar">
            <div class="notification-tabs">
              <div class="notification-tab active" data-type="all">全部消息</div>
              <div class="notification-tab" data-type="1">系统消息</div>
              <div class="notification-tab" data-type="2">交易通知</div>
              <div class="notification-tab" data-type="3">活动消息</div>
            </div>
            
            <div class="batch-actions">
              <button class="btn btn-outline btn-sm" id="read-all-btn">
                <i class="fas fa-check-double"></i> 全部已读
              </button>
            </div>
          </div>
          
          <!-- Notification List -->
          <div id="notification-list">
            <div class="loader-container">
              <div class="loader"></div>
            </div>
          </div>
          
          <!-- Pagination -->
          <div class="notification-pagination" id="pagination">
            <!-- Pagination will be generated by JavaScript -->
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Notification Detail Modal -->
  <div class="modal" id="notification-detail-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="modal-title">消息详情</h3>
        <span class="modal-close">&times;</span>
      </div>
      <div class="modal-body">
        <div class="notification-detail">
          <div class="notification-detail-header">
            <div class="notification-detail-title" id="detail-title">消息标题</div>
            <div class="notification-detail-meta">
              <div class="notification-detail-type" id="detail-type">系统消息</div>
              <div class="notification-detail-time" id="detail-time">2023-01-01 12:00:00</div>
            </div>
          </div>
          <div class="notification-detail-content" id="detail-content">
            <!-- Notification content will be displayed here -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/notifications.js"></script>
</body>
</html>
